<template>
  <div class="app">
    <h3>{{ msg }}</h3>
    <input type="text" v-model="msg" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import useMsgRef from "./useMsgRef";
// let msg = ref("hello");

/**
 * 有一个需求，现在我改hello的input，想要2秒之后再更新到h3标签中
 * 这个时候就可以用到自定义ref了
 */

let { msg } = useMsgRef("hahah", 1000);
</script>

<style scoped>
.app {
  background-color: rgb(178, 117, 36);
  border-radius: 10px;
  box-shadow: 0 0 5px;
  padding: 10px;
  margin-top: 20px;
}
</style>
